<template>
  <div class="wrapper">
    <div class="textTitle">新闻发布</div>
    <div class="newsdata">
      <form method="post" id="newsdata">
        <ul>
          <li class="Pinfo">
            新闻标题:<br/>
            <input type="text" class="textArea" name="title" />
          </li>
          <li class="Pinfo">
            新闻作者:<br/>
            <input type="text" class="textArea" name="author" />
          </li>
          <li class="Pinfo">
            新闻内容:<br/>
            <textarea type="text" class="textArea" name="content" style="height:60px;multiline:true;" />
          </li>
          <li class="Pinfo">
            新闻图片:<br/>
            <input type="file" name="Inputimg" ref="Inputimg" @change="onUpload()" required/>
            <img src="http://img.111com.net/attachment/pc_zt/1529/5e8466067812d.jpg" alt="新闻图片" ref="newsImg" style="height:130px;width:220px" />
          </li>
        </ul>
        <el-button type="primary" :loading="loading" v-on:click="upLoadNews()" >
          <span v-if="loading">请稍后</span>
          <span v-else>确认发布</span>
        </el-button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:false,
    };
  },
  methods: {
    onUpload:function(){
      let Inputimg=this.$refs.Inputimg;
      let newsImg=this.$refs.newsImg;
      if(window.FileReader){
        let ofReader=new FileReader();
        ofReader.readAsDataURL(Inputimg.files[0]);
        ofReader.onload=(oFREvent)=>{
          console.log(oFREvent)
          newsImg.src=oFREvent.target.result
        }
      }
    },
    upLoadNews:async function(){
      this.loading=true;
      let Inputimg=this.$refs.Inputimg;
      if(!Inputimg.files.length>0){
        this.loading=false;
        alert("请上传一张图片");
        return;
      }
      let info=new FormData(document.getElementById("newsdata"))
      console.log(info)
      setTimeout(() => {
        let response=fetch("http://localhost/PHP_Pro01/NewsPostSystem/NewItem.php",{
          method:"POST",
          body:info
        });
        this.loading=false;
        this.$router.push({name:"MainContent"})
      }, 1000);
    },
  },
};
</script>

<style scoped>
.wrapper {
  margin: 60px auto;
  width: 800px;
  height: 600px;
  border: 1px solid #dcdfe6;
  position: relative;
}
.newsdata {
  margin: 0 auto;
  margin-top: 20px;
  width: 660px;
  height: 510px;
  padding: 20px 20px;
}
.textTitle {
  position: absolute;
  top: -30px;
  left: 70px;
  font-size: 30px;
  background: white;
  height: 50px;
  width: 160px;
  line-height: 50px;
}
.textArea {
  border: none;
  background: none;
  border-bottom: 1px solid #dcdfe6;
  height: 30px;
  width: 350px;
  margin-top: 20px;
  font-size: 20px;
  transition: all 0.5s ease 0s;
  outline: none;
}
.textArea:hover {
  border-bottom: 1px solid #409eff;
}
.textArea:focus {
  border-bottom: 1px solid #409eff;
}
.Pinfo {
  margin-bottom: 20px;
  position: relative;
}
</style>



